<template>
  <div id="app" class="father-css">
    <child v-bind:message="parentMes" v-on:listenToChlidEvent="showMsgFromChild"></child>

    <firstChild></firstChild>
    <secondChild></secondChild>
    <button @click="countIncrement">数字累加</button>
  </div>
</template>

<script>
import firstChild from './components/firstChild'
import secondChild from './components/secondChild'
import child from './components/child'
import store from './vuex/store'

export default {
  name: 'app',
  data() {
    return {
      parentMes:'Hello,child !'
    }
  },
  components:{
    child,
    firstChild,
    secondChild
  },
  methods:{
    showMsgFromChild(data) {
      console.log('message',data);
    },
    countIncrement() {
      console.log(store);
      store.commit('increment');
      console.log(store.state.count);
      // console.log(store.state.a.count);
    }
  }
}
</script>

<style>
.father-css {
  background: wheat;
  padding: 20px;
}
</style>
